<template>
  <div class="shiList">
    <div class="demo-image">
<!--      <div style="text-align: center;font-size: 20px">成果数据填报流程图</div>-->
<!--        <span class="demonstration">{{ fits }}</span>-->
        <el-image

          :src="url"
          :fit="fits"></el-image>

    </div>
    <div style="position: absolute;top: 7%;left: 60%">
      <el-popover
        placement="bottom"
        width="300"
        title="注意事项："
        trigger="click"
        content="注意：(1)、同一图层的矢量数据上传格式必须同时至少满足shp、prj、dbf三类文件；(2)、上传矢量文件的同时必须上传矢量文件相对应的佐证材料，佐证材料格式为PDF文件；
      (3)、上传的矢量文件为环境管控单元时，必须同时上传相关的环境管控要求数据；为其他环境要素的矢量文件时，师一级不需要上传管控要求数据，兵团一级必须上传;">
        <el-button slot="reference" type="text" style="font-size: 20px"  circle icon="el-icon-info" ></el-button>
      </el-popover>
    </div>
<!--    <div class="textRemarks">-->
<!--      <span style="color: red">***</span>注意：(1)、同一图层的矢量数据上传格式必须同时至少满足shp、prj、dbf三类文件；(2)、上传矢量文件的同时必须上传矢量文件相对应的佐证材料，佐证材料格式为PDF文件；-->
<!--      (3)、上传的矢量文件为环境管控单元时，必须同时上传相关的环境管控要求数据；为其他环境要素的矢量文件时，师一级不需要上传管控要求数据，兵团一级必须上传；-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "Instructions",
  data() {
    return {
      fits:  'contain',
      url: require('../../assets/img/兵团“三线一单”成果上报审核流程0326.png'),

    }
  }

}
</script>

<style scoped>
.shiList{
  position: absolute;
  left: 15.5%;
  /*height: 87%;*/
  top: 9.5%;
  bottom: 1.5%;
  width: 83.5%;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;
}
.demo-image{
  position: absolute;
  /*height: 96%;*/
  width: 90%;
  padding-top: 1%;
  left: 4%;
  top:1%
}
.textRemarks{
  position: absolute;
  top: 85%;
  left: 5%;
  width: 90%;
  font-size: 18px;
}
/deep/ .el-button--text:hover,.el-button--text:focus {
  color: #0ce999;
}
/deep/ .el-button--text:active{
  color: #0ce999;
}
/deep/ .el-button--text{
  color: #0ce999;
}
#el-popover-8044{
   width: 300px;
}
/deep/ .el-popover__title{
  color: red;
}
</style>
